<template>
  <div class="two">
    <!-- <h1>list</h1> -->
    <!-- 左边滑轮 -->
    <!-- 第一层 -->
    <div class="left">
      <!-- 第二层 -->
      <ul>
        <!-- 第三层 li循环-->
        <li 
          v-for="(item,index) in listData"
          :key="index"
          @click="tab(index)"
          :class="{active:nowIndex === index}"
        >
            {{item.title}}
        </li>
      </ul>
    </div>
    <!-- 右边 第一层-->
    <div class="right" ref="right" @touchmove='scrollRight'>
      <!-- 第二层 循环数组-->
      <ul 
          v-for="(item,index) in listData" :key="index"
          ref="rightItem"
      >
          <!-- 显示对应标题 -->
          <li>{{item.title}}</li>
          <!-- 渲染对应物品内容 -->
          <li class="right_blue"
            v-for="(pro,idx) in item.content"
            :key="idx"
          >
              <h3>{{pro.name}}</h3>
              <img :src="pro.img" alt="">
              <i>{{pro.price}}</i>
          </li>
      </ul>
    </div>
    <!-- 弹框部分 -->
    <Alert />
  </div>
</template>

<script>
// 引入插件alert
import Alert from "@/components/Alert.vue"
export default {
    // 数据
    data() {
        return {
            // 索引值是0
            nowIndex: 0,
            // 起名
            listData: [
                // 第一组热门推荐数据
                {
                    // 左边分类数据显示
                    title: "热门推荐",
                    // 右边内容展示
                    content: [
                        {
                            name: "空调0",
                            img: require("@/assets/images/0.jpg"),
                            price: 10,
                            // banner
                            proBanner: [
                                require("@/assets/images/7.jpg"),
                                require("@/assets/images/6.jpg"),
                                require("@/assets/images/5.jpg"),
                                require("@/assets/images/0.jpg"),
                            ]
                        },
                        {
                            name: "空调1",
                            img: require("@/assets/images/0.jpg"),
                            price: 14,
                            // banner
                            proBanner: [
                                require("@/assets/images/5.jpg"),
                                require("@/assets/images/0.jpg"),
                            ]
                        },
                        {
                            name: "空调2",
                            img: require("@/assets/images/0.jpg"),
                            price: 14,
                            // banner
                            proBanner: [
                                require("@/assets/images/5.jpg"),
                                require("@/assets/images/0.jpg"),
                            ]
                        },
                        {
                            name: "空调4",
                            img: require("@/assets/images/0.jpg"),
                            price: 14,
                            // banner
                            proBanner: [
                                require("@/assets/images/5.jpg"),
                                require("@/assets/images/0.jpg"),
                            ]
                        },
                    ]
                },
                // 第二组手机数码数据
                {
                    // 左边数据分类显示
                    title: "手机数码",
                    //  右边数据展示
                    content: [
                        {
                            name: "手机0",
                            img: require("@/assets/images/4.jpg"),
                            price: 17,
                            // banner轮播部分
                            proBanner: [
                                require("@/assets/images/7.jpg"),
                                require("@/assets/images/6.jpg")
                            ]
                        }
                    ]
                },
                // 第三组精品女装数据
                {
                    // 左边
                    title: "女装精品",
                    // 右边
                    content: [
                        {
                            name: "女装0",
                            img: require("@/assets/images/4.jpg"),
                            price: 50,
                            // banner轮播部分
                            proBanner: [
                                require("@/assets/images/7.jpg"),
                                require("@/assets/images/6.jpg")
                            ]
                        },
                        {
                            name: "女装1",
                            img: require("@/assets/images/4.jpg"),
                            price: 51,
                            proBanner: [
                                require("@/assets/images/7.jpg"),
                                require("@/assets/images/6.jpg"),
                                require("@/assets/images/8.jpg")
                            ]
                        },
                        {
                            name: "女装2",
                            img: require("@/assets/images/4.jpg"),
                            price: 42,
                            proBanner: [
                                require("@/assets/images/7.jpg"),
                                require("@/assets/images/6.jpg"),
                                require("@/assets/images/8.jpg")
                            ]
                        },
                        {
                            name: "女装3",
                            img: require("@/assets/images/5.jpg"),
                            price: 53,
                            proBanner: [
                                require("@/assets/images/7.jpg"),
                                require("@/assets/images/6.jpg"),
                                require("@/assets/images/8.jpg")
                            ]
                        },
                    ]
                }
            ]
        };
    },
    // 方法
    methods: {
        // 点击切换高亮滑动右边对应数据
        tab(index) {
            this.nowIndex = index;
            // 中括号是几就循环索引的数据
            console.log(this.$refs.rightItem[1]);
            // 当点击左边黄色tab的时候，测量出右边盒子相对应顶部距离实现滚动效果
            this.$refs.right.scrollTo({
                // 距离顶部
                top: this.$refs.rightItem[index].offsetTop,
                // 缓慢的不生硬滑动效果
                behavior: "smooth"
            });
        },
        // 触摸移动右边最大层盒子==数据找到对应tab
        // 目的是滚动右侧找到左边黄的li==解决办法是找到nowIndex就好
        scrollRight() {
            this.$refs.rightItem.forEach((item, index) => {
                // 如果划过的高度大于本身的距离顶部高度就赋值index给数组的nowIndex判断高亮部分
                if (this.$refs.right.scrollTop >= item.offsetTop) {
                    this.nowIndex = index;
                }
            });
        }
    },
    // 引入alert弹框显示
    components: { Alert},
}
</script>

<style lang="less" scoped>

            .left{
                    width: 100px;
                    float: left;
                    background-color: red;
                    height: calc(100vh - 100px);
                    li{
                      height: 100px;
                      text-align: center;
                      line-height: 100px;
                      &.active{
                        background-color: yellow;
                      }
                    }
                  }
            .right{
              overflow: auto;
              float: left;
              width:calc(100% - 100px) ;
              background-color: aqua;
              height: calc(100vh - 100px);
              .right_blue{
                height: 150px;
                img{
                  width: 200px;
                }
              }
            }

</style>